<script setup name="home-page">
import { ref } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { computed } from 'vue';
const store = useStore();
const router = useRouter();
// 分类数据
store.dispatch('home/updateHomePageList');
const homePageList = computed(() => store.state.home.homepageHeadList);
// 轮播图数据
store.dispatch('home/updateHomePageBannerList');
const swiperList = computed(() => store.state.home.homepageBannerList);
// 新鲜好物数据
store.dispatch('home/updateHomeNewList');
const goodsList = computed(() => store.state.home.homeNewList);
// 人气推荐数据
store.dispatch('home/updateHomeHotList');
const popularList = computed(() => store.state.home.homeHotList);
// 热门品牌数据
store.dispatch('home/updateHomeBrandList');
const brandList = computed(() => store.state.home.homeBrandList);
// 商品数据
store.dispatch('home/updateGoodsList');
const goods = computed(() => store.state.home.goodsList);
const index = ref(-1);
function onMouseEnter(i) {
  index.value = i;
}
function onMouseLeave() {
  index.value = -1;
}
</script>
<template>
  <div class="main-part">
    <div class="masking">
      <div class="Carousel">
        <el-carousel arrow="always" :interval="5000" height="480px">
          <el-carousel-item v-for="item in swiperList " :key="item.id">
            <img justify="center" :src="item.imgUrl" />
          </el-carousel-item>
        </el-carousel>
        <div class="menu" @mouseleave="onMouseLeave">
          <div class="menu-left">
            <div
              v-for="(item, i) in homePageList"
              :key="item.id"
              @mouseenter="onMouseEnter(i)"
              :class="{ active: index === i }"
            >
              {{ item.name }}
              {{ item.children.slice(0, 2).map((item) => item.name).join(' ') }}
            </div>
            <span class="menu-left-last">
              品牌
            </span>
            <span >
              品牌推荐
            </span>
          </div>
          <div
            class="menu-right"
            v-show="index!==-1"
          >
            <div
              class="menu-right-top"
            >
              <span>
                分类推荐
              </span>
              <span>
                根据您的购买或浏览记录，为您推荐
              </span>
            </div>
            <div
              class="menu-right-bottom"
              v-for="item in homePageList[index]?.goods"
              :key="item"
            >
              <router-link :to="{
                name: '商品详情',
                params: {
                  id: item.id,
                },
              }">
                <div class="dombox-left">
                  <img :src="item.picture" alt="" />
                </div>
                <span class="dombox-right" >
                  <div>
                    {{ item.name }}
                  </div>
                  <div class="text">
                    {{ item.desc }}
                  </div>
                  <div class="price">
                    ￥{{ item.price }}
                  </div>
                </span>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  产品展示 -->
    <div class="home-new">
      <div class="card">
        <div class="card-left">
          <span>
            新鲜好物
          </span>
          <span>新鲜出炉 品质靠谱</span>
        </div>
        <div class="card-right">
          <a href="">
            查看全部
          </a>
          <el-icon style="vertical-align: -20%;">
            <ArrowRight />
          </el-icon>
        </div>
      </div>
      <div class="card-box">
        <div class="card-img" v-for="picture in goodsList" :key="picture.id">
          <div class="card-mask">
            <div class="card-text">
              <img :src="picture.picture">
              <div class="card-text-up">
                {{ picture.name }}
              </div>
              <div>
                ￥
                {{ picture.price }}
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <!-- 人气推荐 -->
    <div class="home-new">
      <div class="card">
        <div class="card-left">
          <span>
            人气推荐
          </span>
          <span>人气爆款 不容错过</span>
        </div>
      </div>
      <div class="card-box">
        <div class="card-img" v-for="picture in popularList" :key="picture.id">
          <div class="card-mask ">
            <div class=" card-bgc ">
              <img :src="picture.picture">
              <div class="card-text-up ">
                {{ picture.title }}
              </div>
              <div class="card-write">
                {{ picture.alt }}
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <!--热门品牌  -->
    <div class="home-new">
      <div class="card">
        <div class="card-left">
          <span>
            热门品牌
          </span>
          <span>国际经典 品质保证</span>
        </div>
      </div>
      <div class="card-hot">
        <div class="card-hot-img" v-for="picture in brandList.slice(0,5)" :key="picture.id">
          <img :src="picture.picture">
        </div>
      </div>

    </div>
    <!-- 居家以下 -->
    <div class="classify-box" v-for="on in goods" :key="on.id">
      <!-- 顶部 -->
      <div class="classify-introduce">
        <div class="introduce">
          <div>
            <span class="big">{{ on.name }}</span>
          </div>
          <div class="jump-box">
            <div class="jump" v-for="item in on.children" :key="item.id">
              <el-button class="view" type="warning" link>
                {{ item.name }}
              </el-button>

            </div>
            <div class="view-box">
              <el-button class="view" type="warning" link>
                查看全部
                <el-icon>
                  <ArrowRight />
                </el-icon>
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <!-- 主体 -->
      <div class="classify">
        <div class="q">
          <img :src="on.picture" alt="加载失败">
          <div class="discount-box">
            <p class="discount-one">{{ on.name }}馆</p>
            <p class="discount-two">{{ on.saleInfo }}</p>
          </div>
        </div>
        <div class="w">
          <div class="subdivision-box" v-for="value in on.goods" :key="value.id">
            <div class="subdivision">
              <img :src="value.picture" alt="加载失败">
              <span class="one">{{ value.name }}</span>
              <span class="two">{{ value.desc }}</span>
              <span class="three">￥22.90</span>
            </div>
            <div class="shadow">
              <div class="find-similarities">
                <p>找相似</p>
              </div>
              <div class="box" />
              <div class="discover-more">
                <el-button class="discover-view" type="warning" link>
                  发现更多宝贝
                  <el-icon>
                    <ArrowRight />
                  </el-icon>
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scope lang="scss">
.main-part {
  display: flex;
  flex-direction: column;
  // align-items: center;

  .app-topnav {
    width: 100%;
    height: 60px;
    background-color: #333333;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    cursor: pointer;
    // outline: 1px solid blue;

    .serve {
      display: flex;
      width: 80%;
      margin-right: 150px;
      // outline: 1px solid red;
      justify-content: flex-end;

      &>div {
        height: 14px;
        line-height: 16px;
        color: #ccc;
        font-size: 14px;
        padding: 0 18px;
        border-right: 2px solid #666666;
      }

      div:last-child {
        // outline: 1px solid red;
        border-right: none;
      }
    }
  }

  .mainnav {
    width: 80%;
    height: 120px;
    margin: 0 auto;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    background-color: #fff;
    .topnav-logo {
      cursor: pointer;
      width: 20%;
      img {
        width: 100%;
      }
    }

    .topnav-text {
      display: flex;
      width: 100%;
      justify-content: space-around;
      &::after {
        content: '';
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
      }
    }
    .search {
      width: 200px;
      height: 26px;
      border: none;
    }
    .item{
      width: 10px;
      height: 10px;
      margin-left: -10px;
      position: relative;
    }
    .nav-item {
      // float: left;
      margin-right: 16px;
    }
    .sub-nav {
      height: 0px;
      width: 80%;
      transition: height .5s;
      position: absolute;
      top: 150px;
      margin-left:-20px ;
      // left: 0;
      // margin: 0 auto;
      z-index: 99;
      overflow: hidden;

      &.expand {
        display: flex;
        height: 125px;
        background-color: #fff;
        box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
      }
      .sub-nav-item{
        margin-left: 80px;
        width: 80px;
        // height: 80px;
        img{
          width: 100%;
        }
      }
    }
  }
  .triangle{
    width: 20px;
    height: 20px;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    // 阴影效果
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    left: 0;
    margin: 25px 30px 0 0;
    background-color: #fff;
    z-index: 10;
  }
  .is-shopping{
    box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    width: 326px;
    height: 405px;
    margin: 451px 298px 0px -2px;
    position: absolute;
    outline: 1px solid red;
    // background-color: skyblue;
    z-index: 22;
    .is-shopping-list{
      width: 100%;
      height: 80%;
      // box-sizing: border-box;
      display: flex;
      // margin: 0 10px;
      background-color: #fff;
      .goods{
        width:100%;
        height: 100px;
        display: flex;
        margin: 10px 10px;
        outline: 1px solid blue;
        div:first-child{
          width: 20%;
          margin-right: 10px;
          background-color: #d14b44;
        }
        div:last-child{
          width: 80%;
          background-color: skyblue;
        }
      }
    }
    .is-shopping-settle{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      // align-items: center;
      line-height: 80px;
    }
  }
  .fix{
    position: fixed;
    width: 100%;
    height: 120px;
    margin: 0 auto;
    transition: all .3s linear;
    z-index: 999;
    .fix-nav{
      width: 80%;
      height: 120px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      .topnav-logo {
        cursor: pointer;
        width: 20%;

        img {
          width: 100%;
        }
      }

    }
  }

  .masking {
    width: 100%;
    height: 480px;
    background-color: #f5f5f5;
    // z-index: 999;
    .menu {
      height: 480px;
      width: 80%;
      position: absolute;
      display: flex;
      margin-top: -480px;
      // outline: 1px solid red;
      .menu-left{
        width: 20%;
        cursor: pointer;
        color: #fff;
        line-height: 30px;
        // z-index: 999;
        background-color: black;
        opacity: .8;
        .active{
          background-color: #27ba9b;
        }
        &>div{
          margin-top: 10px;
          height: 40px;
          padding: 0 0 0 20px;
          font-size: 16px;
        }
        .menu-left-last{
          margin-top: 10px;
          height: 40px;
          padding: 0 0 0 20px;
          font-size: 16px;
        }
      }
      .menu-right{
        width: 80%;
        padding-left:10px;
        height: 100%;
        z-index: 99;
        box-sizing: border-box;
        // 背景色透明
        background-color: rgba(255, 255, 255, 0.5);

        .one{
          display: inline-block;
          font-size: 30px;
        }
        .menu-right-top{
          width: 100%;
          // height: 20%;
          // outline: 1px solid red;
          span:first-child{
            display: inline-block;
            line-height: 55px;
            font-size: 20px;
          }
        }
        .menu-right-bottom{
          padding: 5px;
          float: left;
          // display: flex;
          width: 300px;
          background-color: #fff;
          z-index: 999;
          margin-right: 10px;
          // outline: 1px solid red;
          margin-top: 15px;
          cursor: pointer;
            .dombox-left{
              display: inline-block;
              width: 30%;
              // outline: 1px solid;
              // margin-right: 3px;
              img{
                width: 100%;
              }
            }
          .dombox-right{
            float: right;
            width: 65%;
            // outline: 1px  solid;
              // padding-left: 5px;
            .price{
              margin-top: 5px;
              color: #d14b44;
              font-size: 20px;
            }
            .text{
              margin-top: 5px;
              // padding-left: 10px;
              width: 100%;
              float: left;
              font-size: 14px;
              color: #ccc;
              /* 有限的空间才能有溢出的可能 */
              overflow: hidden;
              -webkit-line-clamp: 1;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              word-break: break-all;
              line-break: anywhere;
            }
          }
        }
      }
    }

    .Carousel {
      margin: 0 auto;
      height: 100%;
      width: 80%;

      .el-carousel__arrow--left {
        left: 276px;
      }

      .el-carousel__button {
        border-radius: 50%;
        width: 10px;
        height: 10px;
        background-color: #fff;
        // opacity: 0.5;
      }
    }
  }

  .home-new {
    width: 80%;
    height: 100%;
    margin: 0 auto;

    .card {
      display: flex;
      margin: 20px 0;
      justify-content: space-between;
      align-items: center;
      height: 60px;

      // outline: 1px solid red;
      .card-left {
        display: flex;
        align-items: center;
        justify-content: center;

        &>span {
          font-size: 35px;
          color: #333333;
        }

        &>span:last-child {
          font-size: 16px;
          margin-left: 20px;
          color: #999999;
        }
      }
    }

    .card-box {
      height: 420px;
      display: flex;

      .card-img {
        width: 100%;
        display: flex;
        cursor: pointer;
        margin-right: 5px;
        transition: all 0.5s;
        &:hover {
          // transition: all 0.5s;
          transform: translateY(-5px);
          box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
        }

        &:last-child {
          margin-right: 0;
        }

        .card-mask {
          width: 100%;
          .card-text {
            height: 100%;
            background-color: #f0f9f4;

            .card-text-up {
              width: 80%;
              font-size: 25px;
              margin: 0 auto;
              text-align: center;
              // outline: 1px solid red;
              /* 有限的空间才能有溢出的可能 */
                overflow: hidden;
                -webkit-line-clamp: 1;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                word-break: break-all;
                line-break: anywhere;
            }
            div:last-child {
              text-align: center;
              font-size: 20px;
              // line-height: 40px;
              padding-top: 10px;
              color: #d14b44;
              // outline: 1px solid red;
            }
            div:last-child.card-write{
              color:#b2a4a0;
            }
            img {
              height: 80%;
              width: 100%;
            }
          }
        }
      }
      .card-bgc{
        height: 100%;
        background-color:#fff;
        .card-text-up {
          width: 80%;
          font-size: 25px;
          margin: 0 auto;
          text-align: center;
          // outline: 1px solid red;
          /* 有限的空间才能有溢出的可能 */
          overflow: hidden;
          -webkit-line-clamp: 1;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          word-break: break-all;
          line-break: anywhere;
        }
        div:last-child {
          text-align: center;
          font-size: 20px;
          // line-height: 40px;
          padding-top: 10px;
          color: #d14b44;
          // outline: 1px solid red;
        }
        div:last-child.card-write {
          color: #b2a4a0;
        }
        img {
          height: 80%;
          width: 100%;
        }

      }
      .card-hot{
        width: 100%;
        height: 100%;
        img {
              height: 80%;
              width: 100%;
            }
      }
    }
    .card-hot {
      height: 100%;
      display: flex;
      width: 100%;
      // background-color:#ccc;
      .card-hot-img {
        // height: 0%;
        // width: 100%;
        // outline: 1px solid red;
        margin-left:10px ;
        img{
          // margin-left: 10px;
          width: 100%;
        }
      }


    }
  }
     // 分类展示
  .classify-box {
    width: 100%;
    margin: 100px 0;
    background-color: #fff;

    // 顶部
    .classify-introduce {
      width: 1240px;
      margin: auto;

      .introduce {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 115px;
        line-height: 115px;

        .big {
          font-size: 35px;
          margin-left: 10px;
        }

        .jump-box {
          display: flex;

          .jump {
            margin-right: 100px;

            .view {
              font-size: 16px;
              width: 80px;
              height: 25px;
              color: #333;

              &:hover {
                color: #fff;
                background-color: #27ba9b;
              }
            }
          }

          .view-box {

            .view {
              font-size: 16px;
              color: #999;

              &:hover {
                color: #27ba9b;
              }
            }
          }
        }
      }
    }

    // 主体
  .classify {
    display: flex;
    justify-content: space-between;
    width: 1240px;
    margin: auto;

    .q {
      position: relative;
      width: 240px;
      height: 610px;
      background-color: #cf4444;
      img{
        object-fit: cover;
        width: 100%;
        height: 610px;
      }

      .discount-box {
        display: flex;
        align-items: center;
        position: absolute;
        top: 40%;
        left: 0;
        width: 188px;
        height: 66px;

        .discount-one {
          width: 76px;
          height: 66px;
          text-align: center;
          line-height: 66px;
          color: #fff;
          background-color: #171514e0;
        }

        .discount-two {
          width: 112px;
          height: 66px;
          text-align: center;
          line-height: 66px;
          color: #fff;
          background-color: #47413ac4;
        }
      }
    }

    .w {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      width: 990px;
      height: 610px;

      .subdivision-box {
        position: relative;
        display: flex;
        width: 240px;
        height: 300px;
        overflow: hidden;
        outline: 0px solid transparent;
        transition: all .5s ease;

        .subdivision {
          display: flex;
          flex-direction: column;
          width: 178px;
          height: 254px;
          margin: auto;
          box-sizing: border-box;

          img {
            display: block;
            margin: auto;
            width: 160px;
            height: 160px;
            object-fit: none;
            background-color: #ec41e4;
          }

          .one {
            width: 100%;
            height: 44px;
          }

          .two {
            width: 100%;
            height: 22px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #666;
          }

          .three {
            width: 100%;
            height: 28px;
            color: #cf4444;
          }
        }

        .shadow {
          display: flex;
          flex-direction: column;
          align-items: center;
          position: absolute;
          bottom: -85px;
          left: 0;
          width: 240px;
          height: 85px;
          background-color: #27ba9b;
          transition: all .5s ease;

          .find-similarities {
            width: 100%;
            height: 42px;
            text-align: center;
            line-height: 42px;

            p {
              margin: 0;
              font-size: 16px;
              color: #fff;
            }
          }

          .box {
            width: 120px;
            height: 1px;
            background-color: #fff;
          }

          .discover-more {
            width: 100%;
            height: 42px;
            text-align: center;
            line-height: 30px;

            .discover-view {
              color: #fff;
              font-size: 13px;
            }
          }
        }

        &:hover {
          outline: 1px solid #27ba9ae1;

          .shadow {
            transform: translatey(-85px);
          }
        }
      }
    }
  }
  }
}
</style>
